<template style="position: relative">
  <div>
    <div class="title1 title">测试项目</div>
    <nut-menu title-class="menu-sty" title-icon="screen-little">
      <nut-menu-item v-model="state" :options="options" />
    </nut-menu>
    <div class="title2 title">
      <div class="item-left">测试结果</div>
    </div>
    <div class="box">
      <div class="box1">
        裸眼视力
        <img class="image" src="../../image/began.png" />
      </div>
      <div class="box2"> 09-10 14:00-16:00(体测) </div>
      <div class="box3">
        <span class="text1">测试进度</span>
        <span class="text2">200/500人</span>
      </div>
      <div class="box4">
        <nut-cell>
          <nut-progress percentage="40" :show-text="false" stroke-height="24" stroke-color="#D459E8" />
        </nut-cell>
      </div>
    </div>
    <div class="boxx">
      <van-tabs v-model:active="active" line-width="80px" title-active-color="#4851F4" color="#4851F4">
        <van-tab title="完成体测学生">
          <van-divider :style="{ color: '#D8D8D8', borderColor: '#D8D8D8', padding: '0 16px' }" />
          <div class="search">
            <img class="image-search" src="../../image/search.png" />
            <input class="input-search" placeholder="搜索" />
          </div>
          <div v-for="(data, index, key) in datalist" :class="{ bm: index === isActive, boxxx: index != isActive }" @click="rout(index)">
            <div class="bo">
              <img :src="data.image" class="image-1" />
              <div class="boxxx_name">{{ data.name }}</div>
              <div class="boxxx_number">{{ data.number }}</div>
              <div class="boxxx_grade">{{ data.grade }}°</div>
            </div>
          </div>
        </van-tab>
        <van-tab title="未完成体测学生"><van-divider :style="{ color: '#D8D8D8', borderColor: '#D8D8D8', padding: '0 16px' }" />
          <div class="search">
            <img class="image-search" src="../../image/search.png" />
            <input class="input-search" placeholder="搜索" />
          </div>
          <div v-for="(data, index, key) in datalists" :class="{ bm: index === isActive, boxxx: index != isActive }" @click="rout(index)">
            <div class="bo">
              <img :src="data.image" class="image-1" />
              <div class="boxxx_name">{{ data.name }}</div>
              <div class="boxxx_number">{{ data.number }}</div>
              <div class="boxxx_grade">{{ data.grade }}°</div>
            </div>
          </div></van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
  export default {
    name: '',
    data() {
      return {
        state: 0,
        active: 0,
        isActive: 0,
        options: [
          { text: '裸眼视力 09-10 14:00-16:00', value: 0 },
          { text: '引起向上 09-10 14:00-16:00', value: 1 },
          { text: '体重 09-10 14:00-16:00', value: 2 },
          { text: '肺阔 09-10 14:00-16:00', value: 3 },
        ],
        datalist: [
          {
            image:
              'https://images.pexels.com/photos/5124894/pexels-photo-5124894.jpeg?auto=compress&cs=tinysrgb&h=566.525&fit=crop&w=633.175&dpr=1',
            name: '王小龙',
            number: '201912480',
            grade: '5.1',
          },
          {
            image:
              'https://images.pexels.com/photos/5124894/pexels-photo-5124894.jpeg?auto=compress&cs=tinysrgb&h=566.525&fit=crop&w=633.175&dpr=1',
            name: '王小龙',
            number: '201912480',
            grade: '5.1',
          },
          {
            image:
              'https://images.pexels.com/photos/5124894/pexels-photo-5124894.jpeg?auto=compress&cs=tinysrgb&h=566.525&fit=crop&w=633.175&dpr=1',
            name: '王小龙',
            number: '201912480',
            grade: '5.1',
          },
          {
            image:
              'https://images.pexels.com/photos/5124894/pexels-photo-5124894.jpeg?auto=compress&cs=tinysrgb&h=566.525&fit=crop&w=633.175&dpr=1',
            name: '王小龙',
            number: '201912480',
            grade: '5.1',
          },
        ],
        datalists: [
          {
            image:
                'https://images.pexels.com/photos/1462636/pexels-photo-1462636.jpeg?auto=compress&cs=tinysrgb&w=600',
            name: '王大宝',
            number: '201912480',
            grade: '5.1',
          },
          {
            image:
                'https://images.pexels.com/photos/1462636/pexels-photo-1462636.jpeg?auto=compress&cs=tinysrgb&w=600',
            name: '王大宝',
            number: '201912480',
            grade: '5.1',
          },
          {
            image:
                'https://images.pexels.com/photos/1462636/pexels-photo-1462636.jpeg?auto=compress&cs=tinysrgb&w=600',
            name: '王大宝',
            number: '201912480',
            grade: '5.1',
          },
          {
            image:
                'https://images.pexels.com/photos/1462636/pexels-photo-1462636.jpeg?auto=compress&cs=tinysrgb&w=600',
            name: '王大宝',
            number: '201912480',
            grade: '5.1',
          },
        ],
      };
    },
    methods: {
      onConfirmItem() {
        console.log('@');
      },
      rout: function (index) {
        this.isActive = index;
      },
    },
  };
</script>
<style scoped>
  .title {
    font-size: larger;
  }
  .title1 {
    margin: auto auto 20px 10px;
    font-weight: bold;
  }
  .title2 {
    margin: 60px auto 20px 10px;
    font-weight: bold;
  }
  ::v-deep .nut-menu__bar {
    position: relative;
    height: 70px;
    margin: 10px !important;
    border-radius: 25px;
    box-shadow: 0vw 1vw 1vw rgb(89 89 89 / 22%);
  }
  ::v-deep .nut-menu__item {
    padding-right: 20px;
    margin-top: 13px;
  }
  ::v-deep .nut-menu__title-text {
    text-align: left;
    font-weight: bolder;
    color: #bbbbbb;
    width: 90% !important;
  }
  ::v-deep .nut-icon-screen-little {
    color: #007aea;
    /*background-color: red;*/
  }
  ::v-deep .nut-menu__pop {
    padding-top: 5px;
    top: 20vh !important;
    width: 80%;
    margin: 10% !important;
    border-radius: 15px;
  }
  ::v-deep .nut-menu__overlay {
    top: 0 !important;
    padding: 20px;
  }
  /*测试项目*/
  .title2 {
    display: flex;
    justify-content: space-between;
  }
  .box {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    width: 86vw;
    height: 323px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0px 30px 60px 0px rgba(32, 56, 85, 0.15);
  }
  .boxx {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    margin-top: 20px;
    width: 86vw;
    height: 603px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0px 30px 60px 0px rgba(32, 56, 85, 0.15);
  }
  .boxxx {
    display: flex;
    height: 100px;
  }
  .bo {
    display: flex;
    margin-top: 20px;
    margin-left: 50px;
  }
  .bm {
    display: flex;
    height: 100px;
    background: #f0f5fc;
    border-left: 7px solid #08a0f7;
  }
  .image {
    display: flex;
    margin-left: 55vw;
    margin-top: 5px;
    width: 23.2px;
    height: 29px;
    vertical-align: middle;
  }
  .box1 {
    display: flex;
    margin-top: 80px;
    margin-left: 50px;
    vertical-align: middle;
    font-size: 30px;
    font-weight: 500;
    color: #121212;
  }
  .box2 {
    display: flex;
    margin-top: 20px;
    margin-left: 50px;
    font-size: 22px;
    font-weight: normal;
    color: #41475e;
  }
  .box3 {
    display: flex;
    width: 100%;
    margin-top: 30px;
    margin-left: 80px;
  }
  .box4 {
    display: flex;
    width: 70vw;
    margin-top: 10px;
    margin-left: 80px;
  }
  .text1 {
    display: flex;
    font-family: Poppins-Regular;
    font-size: 12px;
    font-weight: normal;
    color: #121212;
  }
  .text2 {
    display: flex;
    margin-left: 40vw;
    font-family: Poppins-Regular;
    font-size: 12px;
    font-weight: normal;
    color: #121212;
  }
  .van-tabs {
    margin-top: 20px;
    height: 50px;
    width: 100%;
  }
  .search {
    margin-top: 38px;
    display: flex;
    margin-left: 8vw;
    margin-bottom: 20px;
    width: 70vw;
    height: 61.04px;
    border: none;
    border-radius: 200px;
    background: #f4f7fc;
  }
  .input-search {
    display: flex;
    width: 80%;
    height: 61.04px;
    border: none;
    background: #f4f7fc;
  }
  .image-search {
    display: flex;
    margin-left: 4vw;
    margin-top: 18px;
    width: 22.62px;
    height: 23.47px;
  }
  ::-webkit-input-placeholder {
    margin-left: 10px;
    font-size: 20px;
  }
  .image-1 {
    border-radius: 100%;
    width: 62px;
    height: 65px;
  }
  .boxxx_name {
    font-family: Poppins-Medium;
    margin-left: 30px;
    margin-top: 10px;
    font-size: 27px;
    font-weight: 500;
    color: #121212;
  }
  .boxxx_number {
    font-family: Poppins-Regular;
    margin-left: 10px;
    margin-top: 15px;
    font-size: 18px;
    font-weight: normal;
    color: #41475e;
  }
  .boxxx_grade {
    margin-top: 15px;
    margin-left: 25vw;
    font-family: Poppins-Regular;
    font-size: 12px;
    font-weight: normal;
    color: #41475e;
  }
</style>
